<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=pG2FlphLm9wxsAYR3wlgCr4svGi2aLVT"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style type="text/css">
        body, html, #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=pG2FlphLm9wxsAYR3wlgCr4svGi2aLVT"></script>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>


    <div id="allmap"></div>



</body>
<script type="text/javascript">
    /*
     获取当前坐标并进行标注
     */
    //设置初始坐标

    /*    function showInfo(e){
            //获取点坐标
            let marker= new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat))
            map.addOverlay(marker);
            //alert(e.point.lng+","+e.point.lat);
        }
        map.addEventListener("click",showInfo);*/

    new Vue({
        el: "#allmap",
        data: {},
        created() {

        },
        mounted() {
            this.showMap();
        },
        updated(){

        },
        methods: {
            showMap() {
                let map = new BMap.Map("allmap");
                let point = new BMap.Point(104.075587, 30.668473);
                map.centerAndZoom(point, 12);
                this.getMark(map)
            },
            getMark(map) {
                //发送axios请求从后端拿到数据，并在地图上进行标注
                axios.get("/address/getAllAddress.do").then(resp => {
                    console.log(resp.data.data)
                    for (let i = 0; i < resp.data.data.length; i++) {
                        this.showInfo(map, resp.data.data[i].lon, resp.data.data[i].lat, resp.data.data[i].name,resp.data.data[i].address)
                    }
                }).catch(error => {
                })
            },
            showInfo(map, data1, data2, data3,address) {
                //获取点坐标
                let point = new BMap.Point(data1, data2);
                let marker = new BMap.Marker(point)
                map.addOverlay(marker);

                let infoWindow = this.showMessage(data3,address);
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            },
            //设置具体消息
            showMessage(title,address) {
                let opts = {
                    width: 100,     // 信息窗口宽度
                    height: 80,     // 信息窗口高度
                    title: title, // 信息窗口标题
                    enableMessage: true,//设置允许信息窗发送短息
                    message: ""
                }
                let infoWindow = new BMap.InfoWindow("地址:"+address, opts);
                return infoWindow;
            }


        }


    })


</script>
</html>